<!-- eslint-disable vue/no-multiple-template-root -->
<!--
 * @Author: 大国男儿 7824741+lc2677@user.noreply.gitee.com
 * @Date: 2022-10-11 21:28:00
 * @LastEditors: 大国男儿 7824741+lc2677@user.noreply.gitee.com
 * @LastEditTime: 2022-10-13 15:43:26
 * @FilePath: \vue-event\src\views\user\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-row :gutter="20">
     <el-col :span="8">
        <el-card class="card">
          <div slot="header" class="div_text">
            <span >基本资料</span>
          </div>
           <!-- 表单 -->
          <el-form
            :model="userForm"
            :rules="userFormRules"
            ref="userFormRef"
            label-width="100px"
          >
          <el-form-item label="登录名称" prop="username">
            <el-input v-model="userForm.username" disabled></el-input>
          </el-form-item>
          <el-form-item label="用户昵称" prop="nickname">
            <el-input
              v-model="userForm.nickname"
            ></el-input>
          </el-form-item>
          <el-form-item label="用户邮箱" prop="email">
            <el-input v-model="userForm.email"></el-input>
          </el-form-item>
          <el-form-item class="el-form-item__content">
            <el-button type="primary" @click="submitFn">提交修改</el-button>
            <el-button @click="resetFn">重置</el-button>
          </el-form-item>
          </el-form>
        </el-card>
     </el-col>
  </el-row>
</template>

<script>
import { updateUserInfoAPI } from '@/api'
export default {
  name: 'UserInfo',
  data () {
    return {
      currentDate: new Date(),
      // 添加表单的数据对象
      userForm: {
        username: this.$store.state.userInfo.username, // 默认值用登录后获取到的用户名
        nickname: '',
        email: ''
      },
      // 表单的验证规则对象
      userFormRules: {
        nickname: [
          { required: true, message: '请输入用户昵称', trigger: 'blur' },
          { pattern: /^\S{1,10}$/, message: '昵称必须是1-10位的非空字符串', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入用户邮箱', trigger: 'blur' },
          { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 提交修改
    submitFn () {
      this.$refs.userFormRef.validate(async valid => {
        if (valid) {
          console.log(this.userForm)
          // 根据接口文档指示, 需要携带id(必须)
          // 缺少id，就添加一个
          this.userForm.id = this.$store.state.userInfo.id
          const res = await updateUserInfoAPI(this.userForm)
          if (res.data.code !== 0) {
            this.$message.error('更新用户信息失败！')
          } else {
            // 更新用户信息成功，刷新 Vuex 中的数据
            this.$message.success('更新成功！')
            // 重新让vuex获取下最新的用户数据
            // dispatch：含有异步操作，数据提交至 actions ，可用于向后台提交数据
            // actions调接口方法
            this.$store.dispatch('getUserInfoActions')
          }
        } else {
          return false
        }
      })
    },
    // 清空输入框的数据
    resetFn () {
    //   this.userForm.nickname = ''
    //   this.userForm.email = ''
    // el-form提供了重置表单的方法
      this.$refs.userFormRef.resetFields()
    }
  }
}
</script>

<style lang="less" scoped>
.el-form {
  width: 500px;
}

.time {
  font-size: 13px;
  color: #999;
  }

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  display: block;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
  clear: both
}
.div_text{
  text-align:center
}
.card{
  width: 600px
}
.el-form-item__content{
  margin-left: 100px;
}
</style>
